<template>
  <div :style="{width:isMenuColl?'64px':'180px'}" class="page_left">
    <el-menu                        
      :default-active="onRoutes"
      :router="true"
      :collapse-transition="false"
      :collapse="isMenuColl"
      class="page_menu"
      text-color="#eee" 
      active-text-color="#fff"
      > <!-- element 导航栏组件 :index="" 相当于vue得 <route-link></route-link> 跳转到对应路由 -->
      <el-menu-item :class="{collapse:isMenuColl}" :index="item.route" v-for="(item,index) in menuList" :key="index"  >
        <i class="iconfont " :class="item.icon"></i>
        <span slot="title">{{item.name}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
import { mapActions, mapGetters, mapMutations } from "vuex";
export default {
  name: 'sAside',
  data(){
    return {
      menuList:[
        {
          route:'/index',
          icon:'icon-home',
          name:'主页',
        },
        {
          route:'/vip',
          icon:'icon-becomeagoldsupplier',
          name:'会员管理',
        },
        {
          route:'/product',
          icon:'icon-all',
          name:'产品管理',
        },
      ]
    }
  },
  created(){
    //默认路由选中,选中状态设置,防止刷新后选中状态失效  this.$route.path  当前vue路径
    // console.log(this.$route.path)
  },
  computed:{
    ...mapGetters({
      isMenuColl:"getIsMenuColl"
    }),
    onRoutes(){
      let path=this.$route.path;
      if(path=='/vip'||path.indexOf('vip')!=-1){
        return '/vip'
      }else if(path=='/product'||path.indexOf('pro')!=-1){
        return '/product'
      }else{
        return this.$route.path
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.page_left{
  flex-shrink: 0;
  min-height:calc(100vh - 64px);
  background: none repeat scroll 0 0 #1d1e23;
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
  transition: width .28s;
  ::v-deep .el-menu{
    border-right: none;
    .el-menu-item{
      background-color:#1d1e23;
      &.collapse{
        width: 64px;
      }
      .iconfont {
        font-size: 22px;
        margin: 5px;
      }
      &.is-active{
        background-color: #101117;
      }
      &:hover{
        background-color: #101117;
      }
    }
  }
  
}
</style>